<template>
  <div class="index">
    <head-text titleText="餐饮支付流水"></head-text>
    <div class="list-content">
      <div class="filter-area">
        <Search :searchData="searchData" :searchItem="searchItem"></Search>
        <div class="operate-area">
          <el-button @click="exp" plain type="success" size="mini"
            >导出</el-button
          >
        </div>
      </div>
      <div class="table-title">
        <span></span>
        <h5>餐饮支付流水列表</h5>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        size="mini"
        v-if="hackReset"
      >
        <el-table-column type="index" width="50" align="center">
        </el-table-column>
        <el-table-column
          prop="orderSn"
          label="订单号"
          width="160"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="tradeNo"
          label="交易流水号"
          align="center"
          width="160"
        >
        </el-table-column>
        <el-table-column prop="status" label="支付状态" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.status | payStatusFilter }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="payChannel"
          label="支付方式"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.payChannel | payFilter }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="receiptAmount"
          label="实收金额（元）"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="customerName" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="customerPhone" label="手机号" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="生成时间" align="center">
        </el-table-column>
      </el-table>
      <page
        :nowPage="nowPage"
        :total="total"
        :limit="limit"
        @pageChange="onPageChange"
        @sizeChange="onSizeChange"
        v-if="pageReset"
      />
    </div>
  </div>
</template>

<script>
import Search from "@c/search";
import headText from "@c/headText";
import page from "@c/page";
import { paymentFlowApi, exportExcelPaymentFlowApi } from "@s/api";
import { PAYSTATUS, PAYSTATUSLIST, PAYTYPE2 } from "@u/wordbook";
export default {
  name: "index",
  data() {
    return {
      nowPage: 1,
      total: 0,
      limit: 10,
      hackReset: true,
      pageReset: true,
      payStatusList: PAYSTATUSLIST,
      tableData: [],
      searchData: {
        orderType: "1", // 餐饮
        orderSn: "",
        status: "",
        customerPhone: "",
        customerName: ""
      }
    };
  },
  components: {
    Search,
    headText,
    page
  },
  mounted() {
    this.getList();
  },
  created() {
    this.searchItem = [
      {
        type: "input",
        label: "订单号：",
        prop: "orderSn",
        placeholder: "请输入订单号"
      },
      {
        type: "input",
        label: "姓名：",
        prop: "customerName",
        placeholder: "请输入姓名"
      },
      {
        type: "input",
        label: "手机号：",
        prop: "customerPhone",
        placeholder: "请输入手机号"
      },
      {
        type: "select",
        label: "支付状态：",
        prop: "status",
        placeholder: "请选择支付状态",
        selectList: this.payStatusList
      }
    ];
  },
  filters: {
    payStatusFilter(val) {
      return PAYSTATUS[val];
    },
    payFilter(val) {
      return PAYTYPE2[val];
    }
  },
  methods: {
    onPageChange(val) {
      this.nowPage = val;
      this.getList();
    },
    onSizeChange(val) {
      this.nowPage = 1;
      this.limit = val;
      this.getList();
    },
    // 搜索事件
    getDataList(val) {
      this.searchData = val;
      this.nowPage = 1;
      this.limit = 10;
      this.pageReset = false;
      this.$nextTick(() => {
        this.getList();
        this.pageReset = true;
      });
    },
    getList() {
      let json = JSON.parse(JSON.stringify(this.searchData));
      json.limit = this.limit;
      json.page = this.nowPage;
      paymentFlowApi(json).then(res => {
        this.hackReset = false;
        this.$nextTick(() => {
          this.tableData = res.list;
          this.total = res.total;
          this.hackReset = true;
        });
      });
    },
    exp() {
      let json = JSON.parse(JSON.stringify(this.searchData));
      exportExcelPaymentFlowApi(json, "餐饮支付流水信息表").then(() => {});
    }
  }
};
</script>
<style scoped lang="scss"></style>
